<template>
  <div>
    <div class="subject bgc-white">
      <span class="font-16 font-color-3">申请售后服务</span>
    </div>
    <div class="font-12 pad-20 bgc-white flex-col">
      <span class="red-color">退货结果取决于档口对退回的商品进行检查后而给出处理方式，但只要满足档口退货政策前提下，我们将尽力为您协商退货，请耐心等待处理结果，我司会尽量争取，尽快退给档口，只是需要一点时间</span>
      <div class="mar-t-12">
        <list-info :refundInfo="refundInfo" />
      </div>
    </div>
    <div>
      <refund-info :refundInfo="refundInfo" />
    </div>
  </div>
</template>

<script lang="ts">
import ListInfo from './components/ListInfo/index.vue'
import RefundInfo from './components/RefundInfo/index.vue'
import { defineComponent, onMounted, ref } from 'vue'
import { getAfterSaleGoodsInfo } from '@/api/order/aftersale'
import { useRouter } from 'vue-router'

export default defineComponent({
  components: {
    ListInfo,
    RefundInfo
  },
  setup() {
    const router = useRouter()
    const refundInfo = ref({})
    const orderGoodsId = router.currentRoute.value.query.orderGoodsId
    // const orderGoodsId = '1316287606191230978'
    
    onMounted(() => {
      initRefundInfo()
    })
    
    const initRefundInfo = () => {
      getAfterSaleGoodsInfo(orderGoodsId).then(response => {
        if (response.isError) return
        refundInfo.value = response.data
      })
    }
    
    return {
      refundInfo
    }
  }
})
</script>

<style lang="scss" scoped>
  .subject {
    padding: 17px 19px;
    border-bottom: 1px solid #F5F5F5;
  }
  .red-color {
    color: #FF5252;
  }

</style>
